<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业2样式.css">
    <link rel="stylesheet" href="./font1/iconfont.css">
</head>
<body>
    <div class="box">
        <button onclick="show()" class="f1">添加数据</button>
        <table border="1" style="color: black;">
            <thead>
                <tr>
                    <th>id</th>
                    <th>课程名称</th>
                    <th>所属学院</th>
                    <th>已学会</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    
                </tr>
            </tbody>
        </table>
        <div class="son">
            <span class="iconfont icon-guanbi" onclick="no()"></span>
            <h2>添加数据</h2>
            <p>课程名称: <input type="text" class="b1"></p>
            <p>所属学院: <input type="text" class="c1" placeholder="积云教育"></p>
            <button class="a1" onclick="add()">添加</button>
        </div>
    </div>
</body>
</html>
<script>
    var son=document.querySelector('.son')
    var b1=document.querySelector('.b1')
    var c1=document.querySelector('.c1')
    var tbody=document.querySelector('tbody')
    var num=1;
    function show(){
        son.style.opacity='1';
    }
    function no(){
        son.style.opacity='0';
    }
    function add(){
        //创建
        var tr=document.createElement('tr')
        //赋值
        tr.innerHTML=`
                    <th>${num++}</th>
                    <td>${b1.value}</td>
                    <td>${c1.value}</td>
                    <td><span onclick="del(this)" class="d1">删除</span></td>
        `;
        //添加
        tbody.appendChild(tr)
        no()
        b1.value='';
        c1.value='';
    }
    function del(aaa){
        tbody.removeChild(aaa.parentNode.parentNode)
    }
</script>